$(function(){
    var herf = decodeURI(location.href) 
    console.log(herf)
    function getQueryString(url){
        //通过问号分割成数组，数组的第一项就是所有的参数
        let cs = url.split('?')[1]
        console.log(cs)
        //判断有没有参数
        if(!cs){
            return null
        }
        //通过&分割成数组
        let csarr = cs.split('&')
        console.log(csarr)
        //定义一个接收结果的对象
        let csobj = {}
        //遍历所有参数的数组，通过=将key和value分割，存入对象
        csarr.forEach((item) => {
            csobj[item.split('=')[0]] = item.split('=')[1]
        });
        console.log(csobj)
        return csobj
    }
    var cs = getQueryString(herf)
    console.log(cs)
    fetch(`http://chst.vip:1234/api/getcouponproduct?couponid=${cs.couponId}`)
    .then(body=>body.json())
    .then(res=>{
        let page = ''
        res.result.forEach(item=>{
            page += `<li couponProductId='${item.couponProductId}'>
                         ${item.couponProductImg}
                         <div>
                             <p>${item.couponProductName}</p>
                             <span>${item.couponProductPrice}</span>
                             <span>${item.couponProductTime}</span>
                         </div>
                     </li>`
        })
        $('.xq').html(page)
        fetch(`http://chst.vip:1234/api/getcouponproduct?couponid=${cs.couponId}`)
        .then(body=>body.json())
        .then(res=>{
            let page = ''
            res.result.forEach(item=>{
                page += `<li>
                            ${item.couponProductImg}
                         </li>`
            })
            $('.carousel .marskSm .info').html(page)
            //设置ul的宽度
            var ul = document.querySelector('.marskSm .info');
            var lis = document.querySelectorAll('.marskSm li');
            ul.style.width = lis.length * lis[0].offsetWidth + 'px';
            //点击两个箭头轮播
            //右边箭头

            var index = 0;
            var flag = true;
            $('.arrRight').click(function(){
                if (flag) {
                    flag = false;
                    index++;
                    console.log(index)
                    console.log(lis.length-1)
                    if (index <= lis.length-1) {
                        console.log(-index * lis[0].offsetWidth)
                        ul.style.transform = 'translateX(' + -index*lis[0].offsetWidth + 'px' + ')';
                        ul.style.transition = '.5s ease-in-out'
                    }else{
                        index = lis.length-1
                        alert('已经是最后一页啦');
                        flag = true;
                    }
                }
                //添加过度结束监听事件
                ul.addEventListener('webkitTransitionEnd', function () {
                    flag = true;
                })
            });
            //左边箭头
            $('.arrLeft').click(function () {
                if (flag) {
                    flag = false;
                    index--;
                    console.log(index)
                    if (index >= 0) {
                        ul.style.transform = 'translateX(' + -index * lis[0].offsetWidth + 'px' + ')';
                        ul.style.transition = '.5s ease-in-out'
                    } else {
                        index = 0;
                        alert('已经是第一页啦');
                        // return;
                        flag = true;
                    }
                }
                ul.addEventListener('webkitTransitionEnd', function () {
                    flag = true;
                })
            });
            //每一个单个点击事件
            $('.xq').find('li').click(function () {
                $('.carousel').css({'transform': 'translateY(0px)', 'transition': '.7s ease-in-out'});
                ul.style.transition = 'none';
                index = $(this).attr('couponProductid');
                console.log(index)
                ul.style.transform = 'translateX(' + -index * lis[0].offsetWidth + 'px' + ')';
            });
        })
        //关闭点击事件
        $('.marskSm').find('i').click(function () {
            $('.carousel').css('transform', 'translateY(-1000px)');
        })
    })
    $('.header_logo').click(function(){
        location.href = './youhuiquan.html'
    })
})